<template>
   <div class="update-name">
      <van-nav-bar title="修改昵称" left-text="取消" right-text="完成" @click-left="$emit('close')" @click-right="onConfirm" />
      <van-field class="name-field-wrap" v-model="localName" rows="2" autosize type="textarea" maxlength="7"
         placeholder="请输入名称" show-word-limit />

         <!-- <button @click="$emit('update:gender',0)">修改gender</button> -->
   </div>
</template>
<script>
   import {
      updateUserProfile
   } from '@/api/user'
   export default {
      props: {
         value: {
            type: String,
            required: true
         },
         // gender:{
         //    type:Number
         // }
      },
      data() {
         return {
            localName: this.value
         }
      },
      methods: {
         async onConfirm() {
            this.$toast.loading({
               message: '保存中',
               forbidclick: true // 禁止背景点击
            })
            try {
               await updateUserProfile({
                  name: this.localName
               })
               this.$toast.success('保存成功')
               // this.$emit('update-name', this.localName)
               this.$emit('input', this.localName)
               this.$emit('close')
            } catch (err) {
               if(err && err.response && err.response.status === 409){
                  this.$toast.fail('昵称已存在')
               }
            }

         }
      }
   }
</script>
<style lang="scss" scoped>
   .name-field-wrap {
      padding: 10px
   }
</style>